<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>会员</title>
	<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
	<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	</head>
	<body>
		<div class="layui-panel" style="padding: 8px;">
			<fieldset class="layui-elem-field layui-border-green">
				<legend>搜索信息</legend>
				<form class="layui-form layui-pane" style="margin: 20px;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input class="layui-input" type="text" name="name" autocomplete="off"/>
							</div>
						</div>
						<div class="layui-inline">
							<div class="layui-input-inline">
								<a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
									<i class="layui-icon layui-icon-search"></i>
									搜索
								</a>
							</div>
						</div>
					</div>
				</form>
			</fieldset>

			<div>
				<table id="membersTable" lay-filter="membersTable"></table>
			</div>
			<script id="tableBar" type="text/html">
				<a class="layui-btn layui-btn-normal layui-btn-md" lay-event="add">新增</a>
			</script>
			<script id="tool" type="text/html">
				<a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">详情</a>
			</script>
		</div>
		<script id="swichSex" type="text/html">
			<input type="checkbox" name="lsex" value="{{d.id}}"
				   lay-skin="switch" lay-text="男|女" lay-filter="checkSex" {{d.lsex==1?"checked":""}} />
		</script>
		<script id="photo" type="text/html">
			{{# if(d.isUpdate==0){ }}
			<img src="/file/fc/showImg/{{d.photoPath}}" style="width: 30px;height: 60px;">
			{{# }}}
		</script>
		<script>
			var data=[
			{'id':'1','name':'周杰伦','img':'图片','mobile_number':'15907796463','state':'1'}
			]
			layui.use(['table','form','layer'],function(){
				var table = layui.table,form = layui.form,
				layer = layui.layer;
				//加载表格
				table.render({
					toolbar:'#tableBar',
					elem:'#membersTable',
					height:'full-160',
					page:true,
					url:'/system/mcs/find',
					cols:[
						[
					{type:'numbers',fixed:'left'},
					{type:'checkbox',fixed:'left'},
					{field:'id',title:'用户ID',width:100,sort:true},
					{field:'lpname',title:'名字',width:100},
					{field:'lsex',title:'性别',width:100,width:80,templet:'#swichSex'},
					{field:'licon',title:'头像',width:100,templet: '#photo',align: 'center'},
					{field:'lphone',title:'手机号码',width:200},
					{field:'lbirthday',title:'出生日期',width:200},

					{field:'cgrade',title:'用户等级',width:150,
						templet:function (obj) {
							var type = obj.cgrade;
							var str = "";
							if (type == 0){
								str = "<span style='color: #8D8D8D'>普通用户</span>"
							}else if (type == 1){
								str = "<span style='color: skyblue'>VIP用户</span>"
							}else {
								str = "<span style='color: lightpink'>高级VIP用户</span>"
							}
							return str;
						}

					},
					{field:'ctype',title:'状态',width:100,
						templet:function (obj) {
							var type = obj.ctype;
							var str = "";
							if (type == 0){
								str = "<span style='color: #CC2222'>禁用</span>"
							}else if (type == 1){
								str = "<span style='color: #00ee00'>可用</span>"
							}else {
								str = "<span style='color: #2D93CA'>注销</span>"
							}
							return str;
						}

					},
					{fixed: 'right',title: '操作',width: 200,align:'center',toolbar:'#tool'}
					]
					],
					data:data
				})

				//监听搜索按钮
				form.on('submit(searchBtn)',function(data){
					var dataForm = data.field;
					table.reload('membersTable',{
						page: {
							curr:1
						},
						where:{
							name:dataForm.name,
						}
					})
				})

				var active = {
					addOrUpdate:function (content) {
						var b = false;
						top.layer.open({
							type:2,
							content:content,
							area:['700px','650px'],
							btn:['确认保存','取消关闭'],
							btn1:function (i,o) {
								b = true;
								o.find('iframe')[0].contentWindow.btnSubmit();
							},
							end:function () {
								if(b) layui.table.reload('membersTable');
							}
						})
					}
				}
				table.on('tool(membersTable)',function (obj) {
					var event = obj.event;
					if("edit" == event){
						active.addOrUpdate('/page/system/membersEdit/'+obj.data.id);
					}
				})
				table.on('toolbar(membersTable)',function (obj) {
					var event = obj.event;
					if("add" == event){
						active.addOrUpdate('/page/system/membersAdd/');
					}
				})
			})
		</script>
		
	</body>
</html>
